<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="我的余额">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 我的余额显示 -->
		<view class="yu_e-bg">
			<view class="zh-ye">账户余额</view>
			<view class="zh-ye-num">{{user.money}}</view>
			<view class="d-flex align-items">
				<view class="mingxi d-flex align-items" @click="tixian_guize">
					<image class="tanhao-img" src="../static/tanhao.png" mode="widthFix"></image>
					<view class="guize">提现规则</view>
				</view>
				<view class="mingxi d-flex align-items" @click="zhichu_mingxi">
					<image class="tanhao-img" src="../static/tanhao.png" mode="widthFix"></image>
					<view class="guize">收支明细</view>
				</view>
			</view>
		</view>
		<!-- 提现信息 -->
		<view class="tixian">
			<view class="w-630">
				<view class="tx-tit">提现金额</view>
				<view class="tixian-num d-flex align-items justify-content-space-between">
					<view class="d-flex">
						<view class="jine-fuhao">￥</view>
						<input type="text" placeholder="请输入提现金额" v-model="money" class="tixian-ipt" />
					</view>
					<view class="all-tixian" @click="all_tixian">全部</view>
				</view>
			</view>
		</view>
		<!-- 提现按钮 -->
		<view class="foot_btn-but">
			<u-button text="提现" size="large" shape="circle" @click="tixian_go" color="#FF6400"></u-button>
		</view>
		<!-- 到账说明 -->
		<view class="w-650">
			<view class="daozhang-t">到账说明</view>
			<view class="dzsm">
				<u-parse :content="content"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		index,
		User_detail
	} from '@/api/user.js'
	export default {
		data() {
			return {
				money: '',
				money_num: '',
				content: ``,
				user:{},
			}
		},
		onLoad() {
			this.guize()
			this.get_userdetail()
		},
		methods: {
			// 获取用户详细
			async get_userdetail() {
				User_detail({}).then(res => {
					console.log("获取用户详细为：", res);
					if (res.code == 1) {
						this.user = res.data.user
						this.money = ''
					}
				})
			},
			// 获取规则
			guize() {
				index({}).then(res => {
					console.log("提现规则", res);
					if (res.code == 1) {
						this.content = res.data.xieyi.daozhangshuoming
					}
				})
			},
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 全部提现
			all_tixian() {
				this.money = this.user.money
			},
			tixian_go() {
				uni.navigateTo({
					url: '/pagesB/my_yue/tixian?money_num=' + this.money
				})
				
			},
			// 提现规则
			tixian_guize() {
				uni.navigateTo({
					url: '/pagesB/my_yue/tixian_guize'
				})
			},
			// 收支明细
			zhichu_mingxi() {
				uni.navigateTo({
					url: '/pagesB/my_yue/zhichu_mingxi'
				})
			},
		}
	}
</script>

<style>
	.dzsm {
		font-size: 28rpx;
		font-weight: normal;
		line-height: 50rpx;
		color: #9E9E9E;
	}

	.daozhang-t {
		font-size: 30rpx;
		font-weight: normal;
		color: #141414;
		margin-bottom: 20rpx;
		margin-top: 72rpx;
	}

	.foot_btn-but {
		width: 690rpx;
		margin: auto;
		margin-top: 72rpx;
	}

	.jine-fuhao {
		font-size: 40rpx;
		line-height: 50rpx;
		color: #333333;
		margin-right: 10rpx;
	}

	.all-tixian {
		font-size: 24rpx;
		color: #7890C7;
	}

	.tixian-ipt {
		font-size: 45rpx;
		font-weight: 500;
		color: #333333;
	}

	.tixian-num {
		height: 125rpx;
		border-bottom: 1px solid #D8D8D8;
	}

	.tx-tit {
		font-size: 24rpx;
		color: #424243;
	}

	.tixian {
		width: 690rpx;
		padding: 40rpx 0;
		margin: auto;
		border-radius: 10rpx;
		background: #FFFFFF;
	}

	.zh-ye-num {
		font-size: 64rpx;
		font-weight: 600;
		text-align: center;
		color: #FFFFFF;
		margin-bottom: 55rpx;
	}

	.zh-ye {
		font-size: 28rpx;
		font-weight: normal;
		text-align: center;
		color: #FFFFFF;
		padding-top: 66rpx;
		margin-bottom: 16rpx;
	}

	.mingxi {
		width: 50%;
		justify-content: center;
	}

	.guize {
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.tanhao-img {
		width: 28rpx;
		display: block;
		margin-right: 10rpx;
	}

	.yu_e-bg {
		width: 690rpx;
		height: 324rpx;
		margin: 34rpx auto;
		background: url('https://lianfan.nccpu.cn/image/yue_bg.png') no-repeat;
		background-size: 100% auto;
	}

	page {
		background-color: #F7F8FB;
	}
</style>